<template>
  <div class="scenarios-container">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入项目名称"
              v-model="searchForm.searchInput"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="primary" @click="goBack">返回</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="newScenarioClick">添加应用场景</el-button>
      </template>
      <template #content>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column
            prop="applicationName"
            label="应用场景名称"
            align="center"
          />
          <el-table-column
            prop="applicationDes"
            label="应用场景描述"
            align="center"
          />

          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button type="danger" size="mini" @click="handlerDelete(row)">
                删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newScenarioModel"
            :rules="rules"
            ref="loginFormRef"
            label-width="120px"
          >
            <el-form-item label="应用场景名称" prop="applicationName">
              <el-input v-model="newScenarioModel.applicationName" />
            </el-form-item>
            <el-form-item label="应用场景描述">
              <el-input
                type="textarea"
                :rows="3"
                v-model="newScenarioModel.applicationDes"
              />
            </el-form-item>
            <el-form-item label="应用场景贴图" prop="picUrl">
              <el-upload
                :headers="headers"
                class="avatar-uploader"
                :action="$uploadUrl + upload"
                :show-file-list="false"
                :on-success="handleLicenseSuccess"
                :before-upload="beforeAvatarUpload"
                :accept="acceptString"
                v-model="newScenarioModel.picUrl"
              >
                <div class="img-box" v-if="picUrl">
                  <img :src="picUrl" class="avatar" alt="avatar" />
                </div>
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false"
          >取消
        </el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
import { getToken } from "@/utils/auth"
import {
  queryPageApplicationScenarios,
  insertApplicationScenarios,
  deleteApplicationScenarios
} from "@/api/clientOrObject/scenario"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      headers: {
        token: getToken()
      },
      acceptString: ".png,  .jpg",
      projectCode: "",
      searchForm: {
        searchInput: ""
      },
      pageIndex: 1,
      pageSize: 20,
      tableData: [],
      count: 0,
      newScenarioModel: {
        applicationName: "",
        applicationDes: "",
        picUrl: ""
      },
      picUrl: "",
      dialogTitle: "",
      dialogCenterTitle: "",
      isGlobalMessageShow: "",
      message: "",
      upload: "/uploadManager/upload",
      rules: {
        applicationName: [
          { required: true, message: "应用场景名称", trigger: "blur" }
        ],
        picUrl: [{ required: true, message: "应用场景名称", trigger: "click" }]
      }
    }
  },
  components: { ycDialog },
  created() {
    this.projectCode = this.$route.query.projectCode
    this.getScenarioPageData()
  },
  methods: {
    async getScenarioPageData(pageIndex = 1, pageSize = 20) {
      const { searchInput } = this.searchForm

      const { object } = await queryPageApplicationScenarios({
        projectCode: this.projectCode,
        pageIndex,
        pageSize,
        applicationName: searchInput
      })
      this.count = object.count
      this.tableData = object.data
    },
    searchClick() {
      this.getScenarioPageData(1, 20)
    },
    pagination(pageItem) {
      this.getScenarioPageData(pageItem.page, pageItem.limit)
    },
    newScenarioClick() {
      this.picUrl = ""
      Object.keys(this.newScenarioModel).forEach((item) => {
        this.newScenarioModel[item] = ""
      })
      this.$refs.ycDialog.dialogVisible = true
      this.dialogTitle = "添加用户场景"
      this.dialogCenterTitle = "用户场景信息"
    },
    async dialogSave() {
      const { status } = await insertApplicationScenarios({
        projectCode: this.projectCode,
        ...this.newScenarioModel,
        picUrl: this.picUrl
      })
      this.$refs.ycDialog.dialogVisible = false
      if (status == 200) {
        this.isGlobalMessageShow = true
        this.message = "success"
        this.getScenarioPageData()
      }
    },
    receive() {
      this.isGlobalMessageShow = false
    },
    async handlerDelete({ id }) {
      this.$confirm("确定删除此场景吗", "删除操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(async () => {
        const { status } = await deleteApplicationScenarios({ id })
        if (status == 200) {
          this.getScenarioPageData()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    },
    goBack() {
      this.$router.push("/clientOrObject/object")
    },

    handleLicenseSuccess(id, res) {
      console.log(res, "res")
      this.picUrl = res.object.url
    },
    beforeAvatarUpload(file) {
      console.log(file)
      // return false
      // const isType = this.fileType.includes(file.type)
      // const isLt2M = file.size / 1024 / 1024 < 5

      // // if (!isJPG) {
      // //   this.$message.error("上传头像图片只能是 JPG 格式!")
      // // }
      // if (!isType) {
      //   this.$message.error("上传文件格式有问题！")
      // }
      // if (!isLt2M) {
      //   this.$message.error("上传头像图片大小不能超过 5MB!")
      // }
      // // return isJPG && isLt2M
      // return isType && isLt2M
    }
  }
}
</script>

<style lang="scss" scoped>
.title-container {
  display: flex;
  justify-content: flex-end;
  .left-box {
    .formClass {
      display: flex;
      justify-content: space-around;
      margin-right: 20px;
      .el-form-item {
        margin-top: 20px;
        margin-bottom: 0;
        .el-input {
          width: 216px;
          margin-right: 10px;
        }
        .el-select {
          width: 171px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
